<script setup>
import {useRoute} from 'vue-router';
import {getUserDetail} from '@/api/user/commonUser.js';
import {User, Male, Calendar, Phone, Location, Briefcase, ScaleToOriginal} from '@element-plus/icons-vue';
import uploadImg from '@/components/ImageUpload/index.vue'
onMounted(() => {
  handleGet();
});
const route = useRoute();
const userDetail = ref({});
// 格式化日期显示
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
};

// 格式化注册时间显示（包含完整时分秒）
const formatCreateTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
};

// 用户来源映射
const userSourceMap = {
  1: '手机端',
  2: 'PC端',
  3: '小程序'
};

// 性别映射
const sexMap = {
  '0': '女',
  '1': '男'
};

const handleGet = () => {
  getUserDetail(route.query.userId).then(res => {
    userDetail.value = res.data;
  });
};
// 表格数据
const tableData = ref([
  {
    orderId: '2019080615218712872',
    fee: '¥159.00',
    hospital: '北京市第二医院',
    department: '内科>神经内科',
    orderTime: '2020-03-15 12:13',
    status: '已完成'
  }
  // 可根据需要添加更多数据
])
// 查看详情
const handleViewDetail = (row) => {
  console.log('查看详情:', row)
}

// 模拟获取数据
const fetchAppointmentData = async () => {
  // 这里调用后端API获取挂号记录数据

}
</script>

<template>
  <div class="user-detail-container">
    <el-card shadow="never" class="user-info-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">基础信息</span>
        </div>
      </template>

      <div class="user-info-content">
        <!-- 左侧头像和基本信息 -->
        <div class="user-basic-info">
          <div class="avatar-section">
            <el-avatar
                :size="80"
                :src="userDetail.avatar"
                class="user-avatar"
            >
              <el-icon>
                <User/>
              </el-icon>
            </el-avatar>
            <div class="user-name">{{ userDetail.nickName || userDetail.userName }}</div>
            <el-tag type="primary" effect="dark" class="member-tag">
              {{ userDetail.roleName || '普通用户' }}
            </el-tag>
          </div>
        </div>

        <!-- 右侧详细信息 -->
        <div class="user-detail-info">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户ID">
              <el-text>{{ userDetail.userId }}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="地区">
              <el-icon>
                <Location/>
              </el-icon>
              <el-text>{{ userDetail.region || '未知' }}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="用户账号">
              <el-text>{{ userDetail.userName }}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="性别">
              <el-icon>
                <Male/>
              </el-icon>
              <el-text>{{ sexMap[userDetail.sex] || '未知' }}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="出生年月">
              <el-icon>
                <Calendar/>
              </el-icon>
              <el-text>{{ formatDate(userDetail.birthDate)|| '未知' }}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="注册时间">
              <el-icon>
                <Clock/>
              </el-icon>
              <el-text>{{ formatCreateTime(userDetail.createTime)|| '未知' }}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="手机号">
              <el-icon>
                <Phone/>
              </el-icon>
              <el-text>{{ userDetail.phonenumber || '未知'}}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="用户来源">
              <el-text>{{ userSourceMap[userDetail.userSource] || '未知' }}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="行业">
              <el-icon>
                <Briefcase/>
              </el-icon>
              <el-text>{{ userDetail.industry || '未知' }}</el-text>
            </el-descriptions-item>

            <el-descriptions-item label="体重">
              <el-icon>
                <ScaleToOriginal/>
              </el-icon>
              <el-text>{{ userDetail.weight || '未知'}} kg</el-text>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="user-info-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">统计信息</span>
        </div>
      </template>
    </el-card>
    <el-card shadow="never" class="user-info-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">挂号记录</span>
        </div>
      </template>

      <!-- 挂号记录表格 -->
      <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
      >
        <el-table-column prop="orderId" label="订单编号" width="200" />
        <el-table-column prop="fee" label="挂号费用" width="120" align="center">
          <template #default="scope">
            <span style="color: #ff6b35;">{{ scope.row.fee }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="hospital" label="医院" width="180" />
        <el-table-column prop="department" label="科室" width="150" />
        <el-table-column prop="orderTime" label="下单时间" width="160" />
        <el-table-column prop="status" label="订单状态" width="80" align="center">
          <template #default="scope">
            <el-tag
                :type="scope.row.status === '已完成' ? 'success' : 'info'"
                effect="plain"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="90" align="center">
          <template #default="scope">
            <el-link
                type="primary"
                @click="handleViewDetail(scope.row)"
                :underline="false"
            >
              查看详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <upload-img></upload-img>
  </div>
</template>

<style scoped lang="scss">
.user-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.user-info-card {
  max-width: 1000px;
  margin: 0 auto;

  :deep(.el-card__header) {
    background-color: #fff;
    border-bottom: 1px solid #e4e7ed;
    padding: 16px 20px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.user-info-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.user-basic-info {
  flex-shrink: 0;
}

.avatar-section {
  text-align: center;

  .user-avatar {
    margin-bottom: 12px;
    background-color: #409eff;
  }

  .user-name {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
  }

  .member-tag {
    font-size: 12px;
  }
}

.user-detail-info {
  flex: 1;

  :deep(.el-descriptions) {
    .el-descriptions__label {
      width: 100px;
      color: #606266;
      font-weight: normal;
    }

    .el-descriptions__content {
      color: #303133;
    }

    .el-icon {
      margin-right: 8px;
      color: #409eff;
    }
  }
}

@media (max-width: 768px) {
  .user-info-content {
    flex-direction: column;
    gap: 20px;
  }

  .avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;

    .user-avatar {
      margin-bottom: 0;
    }
  }
}
</style>